
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>反转换图</title>
		
		<style type="text/css">
			#box{
				width: 440px;
				height: 824px;
				margin: 200px auto;
				border: 2px solid black;
				perspective: 1000;
				position: relative;
				overflow: hidden;
			}
			img{
				display: block;
				position: absolute;  
				backface-visibility: hidden;
				top: 0;
				left: 0;
			}
			.font{
				z-index: 10;
			}
			.back{
				z-index: 5;
				transform: rotateY(180deg);
			}
			.rever{
				transition: all 1s;
				position: relative;
				transform-style: preserve-3d; 
				-webkit-transform-style: preserve-3d;	
			}
			#box:hover .rever{
				transform: rotateY(180deg);
			}
			span{
				position: absolute;
				display: block;
				width: 0;
				height: 0;
				background-color: red;
				transition: all 1s;
			}
			.heng{
				left: 0px;
				height: 2px;
			}
			.heng-t{
				top: 5px;
			}
			.heng-b{
				bottom: 5px;
			}
			.shu{
				top: 0px;
				width: 2px;
			}
			.shu-l{
				left: 5px;
			}
			.shu-r{
				right: 5px;
			}
			#box:hover .heng{
				width: 450px;
			}
			#box:hover .shu{
				height: 834px;
			}
			
			.shadow{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.5);
				position: absolute;
				z-index: 20;
				transform: translateY(100%);
				transition: all .7s;
				color: white;
				font-size: 40px;
				text-align: center;
			}
			.shadow p{
				height: 170px;
				position: absolute;
				top: 50%;
				margin-top: -85px;
			}
			#box:hover .shadow{
				transform: translateY(0);
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			
			<div class="shadow">
				<p>终于成功了！这个demo涵盖：1边线动态生成；2翻转换图；3遮盖层淡入</p>
			</div>
			
			<div class="rever">
				<img src="img/a.jpeg"  width="440" height="824" class="font"/>
				<img src="img/b.jpg"  width="440" height="824" class="back"/>
			</div>
			
			<span class="heng heng-t"></span>
			<span class="heng heng-b"></span>
			<span class="shu shu-l"></span>
			<span class="shu shu-r"></span>
		</div>
		
		
	</body>
</html>
